<script setup lang="ts">
definePageMeta({
    layout: 'vip',
    title: 'VIP中心',
    i18n: 'menu.vip',
})
const { t } = useI18n();

const curVip = ref(1);
const curSwiper = ref(0);
const realProgress = ref(1)
const targetProgress = ref(2)
// 获取 van-swipe 实例
const swipeRef = ref()
const vipArr = ref([
    {
        name: 'VIP0',
        price: 100,
        val: 0,
        img: '~/assets/images/1.png',
    },
    {
        name: 'VIP1',
        price: 100,
        val: 1,
        img: '~/assets/images/1.png',
    },
    {
        name: 'VIP2',
        price: 200,
        val: 2,
        img: '~/assets/images/1.png',
    },
    {
        name: 'VIP3',
        price: 300,
        val: 3,
        img: '~/assets/images/1.png',
    },
    {
        name: 'VIP4',
        price: 400,
        val: 4,
        img: '~/assets/images/1.png',
    },
    {
        name: 'VIP5',
        price: 500,
        val: 5,
        img: '~/assets/images/1.png',
    },
])
const vipLevel = [
    {
        id: 0,
        name: 'VIP0',
        ty: 0.38,
        dj: 0.48,
        lq: 0.48,
        zr: 0,
        qp: 0.2,
        dz: 0.334,
        yl: 0.87
    },
    {
        id: 1,
        name: 'VIP1',
        ty: 0.38,
        dj: 0.48,
        lq: 0.48,
        zr: 0,
        qp: 0.2,
        dz: 0.334,
        yl: 0.87
    },
    {
        id: 2,
        name: 'VIP2',
        ty: 0.38,
        dj: 0.48,
        lq: 0.48,
        zr: 0,
        qp: 0.2,
        dz: 0.334,
        yl: 0.87
    },
    {
        id: 3,
        name: 'VIP3',
        ty: 0.38,
        dj: 0.48,
        lq: 0.48,
        zr: 0,
        qp: 0.2,
        dz: 0.334,
        yl: 0.87
    },
    {
        id: 4,
        name: 'VIP4',
        ty: 0.38,
        dj: 0.48,
        lq: 0.48,
        zr: 0,
        qp: 0.2,
        dz: 0.334,
        yl: 0.87
    },
    {
        id: 5,
        name: 'VIP5',
        ty: 0.38,
        dj: 0.48,
        lq: 0.48,
        zr: 0,
        qp: 0.2,
        dz: 0.334,
        yl: 0.87
    },
]
const vipTitle = [
    {
        name: 'VIP等级'
    },
    {
        name: '体育返水'
    },
    {
        name: '电竞返水'
    },
    {
        name: '篮球返水'
    },
    {
        name: '真人返水'
    },
    {
        name: '棋牌返水'
    },
    {
        name: '电子返水'
    },
    {
        name: '娱乐返水'
    },
]
curSwiper.value = curVip.value
const changeSwipe = (val: number) => {
    curSwiper.value = val
    scrollToActiveVip(val)
}
// 点击 VIP 标签
const onVipClick = (index: number) => {
    curSwiper.value = index
    swipeRef.value?.swipeTo(index)
    scrollToActiveVip(index)
}
// 图片路径解析（~ 写法在模板中不支持）
const getImg = (url: string) => new URL(url.replace('~', '.'), import.meta.url).href

/** 进度平滑递增动画 */
function animateProgress() {
    let timer = setInterval(() => {
        if (realProgress.value >= targetProgress.value) {
            clearInterval(timer)
            realProgress.value = targetProgress.value
        } else {
            realProgress.value += 1
        }
    }, 10)
}

/** 模拟数据变更 */
function simulateUpgrade(newVip: number, newProgress: number) {
    // curVip.value = newVip
    targetProgress.value = newProgress
    animateProgress()
}

onMounted(() => {
    // 初始化数据
    targetProgress.value = 30
    animateProgress()

    // 模拟 3 秒后升级
    setTimeout(() => {
        simulateUpgrade(2, 50)
    }, 300)
})
const vipTabWrapper = ref<HTMLElement | null>(null)

const scrollToActiveVip = (index: number) => {
    nextTick(() => {
        const container = vipTabWrapper.value
        if (!container) return

        const tabs = container.querySelectorAll<HTMLDivElement>('.active-progress')
        const currentTab = tabs[0] // 当前激活的 tab（你加的 class）

        if (currentTab && container) {
            const tabOffsetLeft = currentTab.offsetLeft
            const tabWidth = currentTab.offsetWidth
            const containerWidth = container.parentElement?.offsetWidth || 0

            // 滚动让当前 tab 居中显示
            const scrollLeft = tabOffsetLeft - containerWidth / 2 + tabWidth / 2
            container.parentElement?.scrollTo({
                left: scrollLeft,
                behavior: 'smooth'
            })
        }
    })
}
</script>

<template>
    <div mx-auto text-16 text-dark dark:text-white>
        <!-- 个人信息 -->
        <div class="custom-box" pb-30 bg-gradient-to-r from='#e8eafc' to='#fcfcfe'>
            <div class="flex justify-between items-start px-16">
                <div class="w-60% flex items-center ">
                    <img class="w-55 h-55 mr-10 rounded-full" src="~/assets/images/1.png" alt="">
                    <div>
                        <div>筱筱</div>
                        <div class="flex items-center">
                            <img class="w-20 h-20 mr-10 " src="~/assets/images/1.png" alt="">
                            <div class="text-12">VIP1</div>
                        </div>
                    </div>
                </div>
                <div>
                    <img class="w-75 h-75 mr-10 " src="~/assets/images/1.png" alt="">
                </div>
            </div>
            <div flex justify-between items-center my-10 px-40>
                <span class="mr-10 text-14 text-[var(--c-primary-900)] font-bold"> VIP1</span>
                <!-- vip进度条 -->
                <div class="vip-progress-bar">
                    <div class="vip-progress-inner" :style="{ width: realProgress + '%' }"></div>
                </div>
                <span class="ml-10 text-14 text-[var(--c-primary-900)] font-bold"> VIP2</span>
            </div>

            <div flex justify-between items-center px-40>
                <div>
                    <span class="inline-block w-5 h-5  mb-2 mr-5 bg-black rounded-full"></span>
                    <span text-12 mr-10>{{ t("my_page.vip.record") }}:</span>
                    <span text-12>99999999</span>
                </div>
            </div>
        </div>
        <!-- 进度条 -->
        <div class="overflow-x-auto no-scrollbar bg-#ffffff m-20">
            <div ref="vipTabWrapper" class="flex items-center w-max transition-transform duration-300">
                <template v-for="(vip, index) in vipArr" :key="vip.val">
                    <div class="text-10 px-5 py-1 bg-#eff1f7 color-#9497a4 border-#eaeceb rounded-20" :class="{
                        'active-progress': curSwiper === vip.val,
                        'active-curVips': curVip >= vip.val,
                    }" style="min-width: 30px; text-align: center; " @click="onVipClick(index)">
                        {{ vip.name }}
                    </div>

                    <div v-if="index < vipArr.length - 1" class="flex items-center mr-2">
                        <span class="w-20 h-2 bg-#f2f2f2 inline-block" :class="{ curBg: curVip >= index }"></span>
                        <span class="w-20 h-2 bg-#f2f2f2 inline-block" :class="{ curBg: curVip >= index + 1 }"></span>
                    </div>
                </template>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="px-16 pb-16 bg-#ffffff">
            <van-swipe ref="swipeRef" class="my-swipe" indicator-color="white" :initial-swipe="curVip"
                @change="changeSwipe">
                <van-swipe-item v-for="(item, index) in vipArr" :key="item.val">
                    <div class=" swipe-item bg-#cdd4de rounded-10 pb-10 relative"
                        :class="{ 'active-swipe': curVip === index }">
                        <div class="absolute bg-#b6e9fe rounded-tl-10 rounded-br-10 text-12 px-5 py-1 color-#1989fa"
                            v-if="curVip === index">
                            当前等级
                        </div>
                        <div flex justify-between items-center>
                            <div class="ml-20 pt-20 color-#ffffff text-30 font-bold">{{ item.name }}</div>
                            <img class="w-55 h-55 mr-40" :src="getImg(item.img)" alt="" />
                        </div>
                        <div class="flex justify-around items-center my-20">
                            <div class="text-12 color-#ffffff text-center">
                                <div>有效流水</div>
                                <div>{{ item.price }}</div>
                            </div>
                            <div class="text-12 color-#ffffff text-center">
                                <div>暴击级流水</div>
                                <div>{{ item.price }}</div>
                            </div>
                        </div>
                    </div>
                </van-swipe-item>

                <template #indicator="{ active, total }">
                    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                </template>
            </van-swipe>
        </div>
    </div>
</template>
<style lang="css" scoped>
.my-swipe {
    overflow: hidden;
}

.swipe-item {
    margin: 0 10px;
    /* 添加边距 */
    /* transform: translateX(-50%);  */
    transform: translateX(-53%);
    /* 居中显示 */
    left: 50%;
    /* 居中显示 */
    position: relative;
    width: calc(100% - 10px);
    /* 减去边距 */
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.title::before {
    margin-left: 16px;
    display: inline-block;
    content: '';
    width: 3px;
    height: 16px;
    vertical-align: -2px;
    background-color: #1989fa;
    margin-top: 10px;
    margin-right: 8px;
}

.active-swipe,
.curBg {
    background: #1989fa;
}

.active-curVips {
    box-sizing: border-box;
    color: #1989fa;
    border: 1px solid #1989fa;
}

.progress-container {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.active-progress {
    box-sizing: border-box;
    background: #1989fa;
    color: #ffffff;

}

.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: transparent;
}

.custom-box {
    height: 170px;
    background: linear-gradient(to right top, #d3daf7, #fcfcfe);
    border-bottom-left-radius: 80% 50%;
    border-bottom-right-radius: 80% 50%;
    overflow: hidden;
}



.vip-table {
    width: 100%;
    font-size: 12px;
    padding-bottom: 20px;
}

.vip-table-row {
    display: flex;
}

/* 偶数行加背景色 */
.vip-table-row:nth-child(odd) {
    background: #f4f5f7;
}

/* 第一行表格名字 */
.vip-table-row:first-child {
    background: #e5e5ed;
}

/* 第二行VIP0 */
.vip-table-row:nth-child(2) .vip-table-cell {
    background: #d0ebff;
    color: #1294f4 !important;
}

.vip-table-row.header {
    font-weight: bold;
}

/* 表头 */
.vip-table-name {
    flex: 1;
    padding: 5px 11px;
    text-align: center;
    font-size: 10px;
    color: #515159;
}

/* 所有表格单元格 */
.vip-table-cell {
    flex: 1;
    padding: 10px 2px;
    text-align: center;
    font-size: 10px;
    color: #515159;
}

/* 偶数行加背景色 */
.odd {
    background: #dcdfe8;
}

/* 奇数行加背景色 */
.even {
    background: #fbfbfb;
}

/* 第一列：加宽 */
.vip-table-first-clo {
    text-align: center;
    min-width: 55px;
    flex: none;
}

/* 第一个单元格VIP等级 */
.first-cell {
    padding: 5px 4px !important;
    line-height: 30px;
}

/* 进度条 */
.vip-progress-bar {
    width: 100%;
    height: 10px;
    background: #eee;
    border-radius: 16px;
    overflow: hidden;
}

.vip-progress-inner {
    height: 100%;
    background: linear-gradient(to right, #21c7fa, #1989fa);
    border-radius: 16px;
    transition: width 1s ease;
}

/* 数字过渡动画 */
.fade-zoom-enter-active {
    transition: all 0.5s ease;
}

.fade-zoom-enter-from {
    opacity: 0;
    transform: scale(0.5);
}

.fade-zoom-enter-to {
    opacity: 1;
    transform: scale(1);
}
</style>
